<!-- 排行榜 -->
<template>
	<view class="wrap">

		<!-- 顶部图片 -->
		<view class="topBanner">
			<image src="https://tuanwei.yjha.com.cn/resource/rank_banner.png" mode="widthFix"></image>
			<text class="bannerT">答题总人数：<text class="peopleNum">{{ userTotal }}</text>人</text>
		</view>
		<view class="tabBox">
			<!-- 答题榜/通关榜 -->
			<view class="tabParent">
				<text :class="{parentC: index == tabParentIndex}" v-for="(item, index) in tabParent"
					@click="parentBtn(index)">{{ item }}</text>
			</view>
			<!-- 市州/高校/企事业单位 -->
			<view class="tabChild">
				<text :class="{childC: i == tabChildIndex}" v-for="(item,i) in tabChild"
					@click="childBtn(i)">{{ item }}</text>
			</view>


		</view>
		<!-- ranking -->
		<view class="rankBox">
			<view class="rank-item" v-for="(item , index) in rankJson">
				<!-- 排名序号 -->
				<view class="rankNum">
					<image v-if="index == 0 || index == 1 || index == 2"
						:src="'https://tuanwei.yjha.com.cn/resource/rank_'+ (index + 1) +'_icon.png'" mode="heightFix">
					</image>
					<text v-else>{{ index+1 }}</text>
				</view>
				<!-- 用户头像 -->
				<!-- <image class="userImg" :src="item.img" mode="heightFix"></image> -->
				<text class="addressT u-line-1">{{ item.name }}</text>
				<text class="peopleN">{{ tabParentIndex === 0 ? '通关人数':'答题人数'  }}：{{ item.value }}</text>
			</view>



		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				tabParentIndex: 0, //通关榜/答题榜
				tabChildIndex: 0, //市州区县企事业单位
				tabParent: ['通关榜', '答题榜'],
				tabChild: ['市州', '高校', '企事业单位'],
				rankJson: [],
				userTotal: 0
			}
		},
		onShow() {
			// 通关榜数据
			uni.request({
				url: this.baseUrl + '/api/countByType',
				method: 'GET',
				data: {
					type: this.tabChildIndex
				},
				header: {
					Authorization: uni.getStorageSync('token')
				},
				success: res => {
					console.log(res)
					this.rankJson = res.data.data.typeTotal;
					this.userTotal = res.data.data.userTotal;
				},
				fail: (err) => {
					console.log(err)
				},
			});
			// 答题榜数据
			uni.request({
				url: this.baseUrl + '/api/user/total',
				method: 'GET',
				data: {
					type: this.tabChildIndex
				},
				header: {
					Authorization: uni.getStorageSync('token')
				},
				success: res => {
					console.log(res)
					this.userTotal = res.data.data.userTotal;

				},
				fail: (err) => {
					console.log(err)
				},
			});
		},
		onLoad() {
			// 禁用分享
			wx.hideShareMenu()
		},
		methods: {
			// 点击父tab
			parentBtn(index) {
				this.tabParentIndex = index;
				console.log(this.tabParentIndex + '---' + this.tabChildIndex);
				// 通关榜
				if (this.tabParentIndex == 0) {
					console.log('------' + this.tabParentIndex)
					console.log('通关榜')
					uni.request({
						url: this.baseUrl + '/api/countByType',
						method: 'GET',
						data: {
							type: this.tabChildIndex
						},
						header: {
							Authorization: uni.getStorageSync('token')
						},
						success: res => {
							console.log(res)
							this.rankJson = res.data.data.typeTotal;
							console.log(this.rankJson)
						},
						fail: (err) => {
							console.log(err)
						},
					});
				} else {
					console.log('------' + this.tabParentIndex)
					// 答题榜数据
					uni.request({
						url: this.baseUrl + '/api/user/total',
						method: 'GET',
						data: {
							type: this.tabChildIndex
						},
						header: {
							Authorization: uni.getStorageSync('token')
						},
						success: res => {
							console.log(res)
							this.userTotal = res.data.data.userTotal;
							this.rankJson = res.data.data.typeTotal;

						},
						fail: (err) => {
							console.log(err)
						},
					});
				}
			},
			// 点击子tab
			childBtn(index) {
				this.tabChildIndex = index;
				// 通关榜
				if (this.tabParentIndex == 0) {
					console.log('------' + this.tabParentIndex)
					console.log('通关榜')
					uni.request({
						url: this.baseUrl + '/api/countByType',
						method: 'GET',
						data: {
							type: this.tabChildIndex
						},
						header: {
							Authorization: uni.getStorageSync('token')
						},
						success: res => {
							console.log(res)
							this.rankJson = res.data.data.typeTotal;
							console.log(this.rankJson)
						},
						fail: (err) => {
							console.log(err)
						},
					});
				} else {
					console.log('------' + this.tabParentIndex)
					// 答题榜数据
					uni.request({
						url: this.baseUrl + '/api/user/getType',
						method: 'GET',
						data: {
							type: this.tabChildIndex
						},
						header: {
							Authorization: uni.getStorageSync('token')
						},
						success: res => {
							console.log(res)
							this.rankJson = res.data.data.typeTotal;

						},
						fail: (err) => {
							console.log(err)
						},
					});
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		width: 100%;
		height: 100vh;
		background: url('https://tuanwei.yjha.com.cn/resource/realName_bg.png') no-repeat;
		background-size: 100% 100%;
		padding-top: 40px;
		box-sizing: border-box;

		.topBanner {
			position: relative;
			display: block;
			width: 80%;
			max-height: 18%;
			margin: 0 auto;
			margin-bottom: 30px;

			.bannerT {
				position: absolute;
				bottom: 0px;
				left: 0px;
				font-size: 16px;
				font-weight: bold;
				color: #fff;
				display: block;
				line-height: 30px;

				.peopleNum {
					color: #ffe681;
					margin: 0 5px;
				}
			}

			image {
				width: 100%;
			}
		}

		.tabBox {
			width: 92%;
			height: auto;
			overflow: hidden;
			margin: 0 auto;
			border-radius: 6px;
			margin-bottom: 10px;

			.tabParent {
				width: 100%;
				height: 60px;
				background-color: #f64e2c;
				line-height: 60px;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-around;
				padding: 0px 10% 10px 10%;
				box-sizing: border-box;
				box-shadow: 0px 0px 5px #999;

				text {
					position: relative;
					color: #fff;
					font-size: 16px;
					font-weight: bold;
				}

				.parentC {
					&::after {
						content: '';
						position: absolute;
						width: 50px;
						height: 4px;
						background-color: #fff;
						-webkit-border-radius: 4px;
						border-radius: 2px;
						bottom: 2px;
						left: 0px;
					}
				}
			}

			.tabChild {
				width: 100%;
				height: 50px;
				background-color: #fff;
				line-height: 50px;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-around;
				box-sizing: border-box;
				box-shadow: 0px 0px 5px #999;

				text {
					display: block;
					width: 33.33%;
					position: relative;
					color: #333;
					font-size: 14px;
					font-weight: bold;
					text-align: center;
				}

				.childC {
					background-color: #f4f4f4;
					color: #ea3d10;

					&::after {
						content: '';
						position: absolute;
						width: 100%;
						height: 100%;
						bottom: 0px;
						left: 0px;
					}
				}
			}
		}

		.rankBox {
			width: 92%;
			height: calc(100vh - 18% - 70px - 150px);
			overflow: auto;
			border-radius: 6px;
			background-color: #f64e2c;
			margin: 0 auto;
			margin-bottom: 30px;

			.rank-item {
				width: 100%;
				height: 70px;
				margin-bottom: 2px;
				background-color: #fff;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				padding: 10px 0px;

				.rankNum {
					width: 20%;
					line-height: 50px;
					text-align: center;
					font-size: 14px;
					font-weight: bold;
					color: #333;

					image {
						height: 40px;
						margin: 5px 0px;
					}
				}

				.userImg {
					height: 50px;
					display: block;
					width: 50px;
					border-radius: 50%;
				}

				.addressT {
					width: 45%;
					line-height: 50px;
					text-align: left;
					font-size: 14px;
					color: #333;
					font-weight: bold;
					padding-left: 0px;
					box-sizing: border-box;
					text-align: center;
				}

				.peopleN {
					// width: calc(100% - 30% - 140px);
					width: 30%;
					line-height: 50px;
					font-size: 14px;
					color: #ff8400;
					font-weight: bold;
					text-align: center;
				}
			}
		}
	}
</style>
